<template>
  <!--    面包屑导航-->
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>导航栏管理</el-breadcrumb-item>
      <el-breadcrumb-item>导航栏列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-button style="margin-bottom: 15px;margin-left: 10px" type="primary"
               @click="addCoach">增加</el-button>
    <el-row :gutter="20">
    <el-col
      :span="6"
      v-for="item in coachList"
      :key="item.id"
    >
      <el-card>
        <el-image
          :src="item.imgUrl"
          tyle="width: 100%;height: 100%"
        />
        <el-card style="height: 50px">
          {{ item.name }}
        </el-card>
        <el-card style="height: 100px">
          {{ item.level }}
        </el-card>
        <div class="btn">
          <el-button
            type="primary"
            @click="updateCoach(item.id)"
          >
            修改
          </el-button>
        </div>
      </el-card>
    </el-col>
  </el-row>
  </div>
</template>

<script>
import { request } from '../../network/request';
import { basePath } from '../../commom/commom';

export default {
  name: 'CoachList',
  data() {
    return {
      coachList: [],
      progressAddDialogVisible: false,
    };
  },
  methods: {
    getCoachList() {
      request({
        url: `${basePath}/coach/list`,
      }).then((res) => {
        this.coachList = res.data;
        for (let i = 0; i < res.data.length; i += 1) {
          this.coachList[i].imgUrl = `${basePath}${res.data[i].imgUrl}`;
        }
      });
    },
    updateCoach(id) {
      this.$router.push({ path: `/coach/edit/${id}` });
    },
    addCoach() {
      this.$router.push({ path: '/coach/add' });
    },
  },
  created() {
    this.getCoachList();
  },
};
</script>

<style scoped>

</style>
